<template>
	<view>
		<view class="box">
			<view class="itemBox">
				<view class="item">
					<view class="label">姓名</view>
					<view class="ipt">
						<input type="text" value="" placeholder="请输入名字" v-model="form.connect_name" />
					</view>
				</view>
				<view class="item">
					<view class="label">店名</view>
					<view class="ipt">
						<input type="text" value="" placeholder="请输入店名" v-model="form.store" />
					</view>
				</view>
				<view class="item">
					<view class="label">手机号码</view>
					<view class="ipt">
						<input type="number" value="" placeholder="请输入手机号码" v-model="form.connect_mobile" />
					</view>
				</view>
				<view class="item">
					<view class="label">所在地区</view>
					<view class="ipt">
						<uni-data-picker :localdata="items" placeholder="请选择所在的省市区、乡镇" popup-title="请选择地区"
							v-model="area" @change="bindPickerChange">
							<text class="word12" v-if="!area.length">请选择所在的省市区、乡镇</text>
							<text class="word13" v-else>{{ area[0] }}/{{ area[1] }}/{{ area[2] }}</text>
						</uni-data-picker>
					</view>
				</view>
				<view class="item mgbm">
					<view class="label">详细地址</view>
					<view class="ipt">
						<input type="text" value="" placeholder="请输入详细地址" v-model="form.detail_address" />
					</view>
				</view>
			</view>
			<view class="set">
				<view class="">设置默认地址</view>
				<view class="">
					<van-switch active-color="#F5AC4F" size="20" :checked="checked" @change="onChange" />
				</view>
			</view>
			<view class="btn" v-if="!value" @click="preservation">保存</view>
			<view class="btn" v-if="value" @click="eaditbtn">保存</view>
			<view class="btn btn1" v-if="value" @click="del">删除</view>
		</view>
	</view>
</template>

<script>
	import conmon from '@/commonFun/conmon.js';
	const httpRequest = require("@/commonFun/httpRequest.js");
	// import citys from '@/static/city/city.js';
	export default {
		data() {
			return {
				checked: false, // 默认按钮
				value: null, //默认为0添加地址1，编辑地址
				area: [], // 选择地区内容
				address: {
					province: '',
					city: '',
					county: ''
				},
				// items: citys.data, // 选择地区内容
				items: [], // 选择地区内容
				form: {
					connect_name: '',
					connect_mobile: '',
					detail_address: '',
					store: '',
					is_default: '',
				}, // 表单内容
				addressID: '', // 删除用的地址id
			}
		},
		onLoad(i) {
			let data = JSON.parse(decodeURIComponent(i.msg));
			if (data.value == 1) {
				this.address.province = data.item.province
				this.address.city = data.item.city
				this.address.county = data.item.area
				this.area[0] = data.item.province_name
				this.area[1] = data.item.city_name
				this.area[2] = data.item.area_name
				this.form.connect_mobile = data.item.connect_mobile
				this.form.detail_address = data.item.detail_address
				this.form.connect_name = data.item.connect_name
				this.form.store = data.item.store
				this.checked = data.item.is_default == 1 ? true : false
				this.form.is_default = data.item.is_default
			}
			this.datavalue = data.value
			this.getaddress()
			uni.setNavigationBarTitle({
				title: data.value == 1 ? '编辑地址' : '添加新地址'
			});
			if (data.value == 1) {
				this.value = 1;
			}
			this.addressID = data.item.id
		},
		methods: {
			// 获取省市区数据
			getaddress() {
				httpRequest.request('appapi/applet/address/area', 'POST', {}).then(res => {
					this.items = res.data
				})
			},
			// 删除
			del() {
				uni.showLoading({
					title: '请稍候...',
					mask:true
				})
				httpRequest.request('/appapi/applet/address/deldetail', 'POST', {
					id: this.addressID
				}).then(res => {
					uni.hideLoading()
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						setTimeout(() => {
							uni.navigateBack(1)
						}, 1000)
					}
				})
			},
			//验证手机号
			isMobile(value) {
				let a = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(value);
				return a;
			},
			// 保存
			preservation() {
				uni.showLoading({
					title: '请稍候...',
					mask:true
				})
				if (this.form.connect_name == "") {
					httpRequest.toast("请输入姓名")
					return false
				}
				if (this.form.store == "") {
					httpRequest.toast("请输入店铺名称")
					return false
				}
				if (this.form.connect_mobile == "") {
					httpRequest.toast("请输入手机号码")
					return false
				}
				if (!this.isMobile(this.form.connect_mobile)) {
					httpRequest.toast("手机号码格式错误!")
					return;
				}
				if (this.address.province == "") {
					httpRequest.toast("请选择所在地区")
					return false
				}
				if (this.form.detail_address == "") {
					httpRequest.toast("请填写详细地址")
					return false
				}
				if (this.checked == false) {
					console.log("关");
					this.form.is_default = "0"
				} else {
					this.form.is_default = "1"
				}
				
				httpRequest.request('/appapi/applet/address/adddetail', 'POST', {
					connect_name: this.form.connect_name, //联系人
					connect_mobile: this.form.connect_mobile, //手机号码
					province: this.address.province, //省
					city: this.address.city, //市
					area: this.address.county, //区
					detail_address: this.form.detail_address, //详细地址
					is_default: this.form.is_default, //默认地址:0=否,1=是
					store: this.form.store //店名
				}).then(res => {
					uni.hideLoading()
					console.log(res,"接口返回信息")
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						setTimeout(() => {
							uni.navigateBack(1)
						}, 1000)
					}
				})
			},
			// 编辑
			eaditbtn() {
				uni.showLoading({
					title: '请稍候...',
					mask:true
				})
				console.log('编辑')
				if (this.form.connect_name == "") {
					httpRequest.toast("请输入姓名")
					return false
				}
				if (this.form.store == "") {
					httpRequest.toast("请输入店铺名称")
					return false
				}
				if (this.form.connect_mobile == "") {
					httpRequest.toast("请输入手机号码")
					return false
				}
				if(!this.isMobile(this.form.connect_mobile)){
					httpRequest.toast("手机号码格式错误!")
					return;
				}
				if (this.address.province == "") {
					httpRequest.toast("请选择所在地区")
					return false
				}
				if (this.form.detail_address == "") {
					httpRequest.toast("请填写详细地址")
					return false
				}
				if (this.checked == false) {
					console.log("关");
					this.form.is_default = "0"
				} else {
					this.form.is_default = "1"
				}
				httpRequest.request('/appapi/applet/address/editdetail', 'POST', {
					id: this.addressID,
					connect_name: this.form.connect_name, //联系人
					connect_mobile: this.form.connect_mobile, //手机号码
					province: this.address.province, //省
					city: this.address.city, //市
					area: this.address.county, //区
					detail_address: this.form.detail_address, //详细地址
					is_default: this.form.is_default, //默认地址:0=否,1=是
					store: this.form.store //店名
				}).then(res => {
					uni.hideLoading()
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						setTimeout(() => {
							uni.navigateBack(1)
						}, 1000)
					}
				});
			},
			onChange(set) {
				console.log(set);
				this.checked = !this.checked;
				if (this.checked == true) {
					console.log("开");
					this.form.is_default = "1"
				}
			},
			// 选择地址
			bindPickerChange(val) {
				console.log(val);
				// 选择地区内容
				let area = val.detail.value;
				this.area = [area[0].text, area[1].text, area[2].text];
				this.address.province = area[0].value;
				this.address.city = area[1].value;
				this.address.county = area[2].value;
			},
		},
	}
</script>

<style scoped lang="scss">
	.word12 {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #999999;
	}

	.mgbm {
		margin-bottom: 0 !important;
	}

	.box {
		padding: 30rpx;

		.btn1 {
			background-color: rgb(245, 245, 245) !important;
			border: 1px solid #f5ac4f;
			color: #f5ac4f !important;
		}

		.btn {
			background-color: #f5ac4f;
			border-radius: 40rpx;
			padding: 20rpx 0;
			text-align: center;
			// position: fixed;
			// bottom: 40rpx;
			width: 95vw;
			margin-top: 20rpx;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #FFFFFF;
		}

		.set {
			margin-top: 20rpx;
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			background-color: #ffffff;
			border-radius: 20rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 800;
			color: #333333;
		}

		.itemBox {
			background-color: #ffffff;
			padding: 30rpx;
			border-radius: 20rpx;

			.item {
				display: flex;
				align-items: center;
				margin-bottom: 72rpx;

				.label {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 800;
					color: #333333;
					width: 120rpx;
					margin-right: 62rpx;
				}

				.ipt {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 800;
					color: #999999;
				}
			}
		}
	}
</style>
